<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <!--对移动设备进一步友好支持-->
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
    <!--核心jquery js-->
    <script src="../boot/js/jquery-3.4.1.min.js"></script>
    <!--bootstrap 核心 js-->
    <script src="../boot/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!--导航头-->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">员工管理系统V1.0</a>
        </div>
    </div>
</nav>
<div class="pull-left aa" style="width: 300px">
    <div class="container" style="clear: left">
        <div class="row">
            <div class="col-sm-2">
                <ul class="list-group">
                    <li class="list-group-item"><strong>用户管理</strong></li>
                    <br>
                    <li class="list-group-item"><strong>类别管理</strong></li>
                    <br>
                    <li class="list-group-item"><strong>图书管理</strong></li>
                    <br>
                    <li class="list-group-item"><strong>订单管理</strong></li>
                    <br>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="pull-right aa" style="width: 950px">
    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>Hello,World!</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
                        featured content or information.</p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

                    <div class="alert alert-danger alert-dismissible">
                        <button class="close" data-dismiss="alert"><span>&times;</span></button>
                        <h2><strong>网站程序漏洞，继续修复</strong></h2><br>
                        当前版本(v1.0)存在严重安全问题，容易造成攻击，请<a class="alert-link" href="">立即修复</a><br>
                        <button class="btn-danger btn-lg">立即修复</button>
                        <button class="btn-default btn-lg">稍后处理</button>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">系统状态</li>
                        <li class="list-group-item">
                            内存使用率40%<br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success progress-bar-striped active"
                                     style="width: 40%"></div>
                            </div>
                            数据库使用率20%<br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info progress-bar-striped active"
                                     style="width: 20%"></div>
                            </div>
                            磁盘使用率60%<br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning progress-bar-striped active"
                                     style="width: 60%"></div>
                            </div>
                            CPU使用率80%<br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger progress-bar-striped active"
                                     style="width: 80%"></div>
                            </div>

                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>